<template>
	<view class="u-page" clsass="">

		<view class="u-demo-block bg_white">

			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" ref="form1" >
					<u-row justify="space-between" >
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light"></view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周一11111</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周二</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周三</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周四</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周五</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周六</view>
						</u-col>
						<u-col span="1.6">
							<view class="demo-layout bg-purple-light">周天</view>
						</u-col>
					</u-row>
					<u-form-item label="上午" prop="checkboxValue1" borderBottom labelWidth="50" ref="item3">
						<u-checkbox-group v-model="model1.checkboxValue1" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList1"
								v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="下午" prop="checkboxValue2" borderBottom labelWidth="50" ref="item3">
						<u-checkbox-group v-model="model1.checkboxValue2" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList2"
								v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="晚上" prop="checkboxValue3" borderBottom labelWidth="50" ref="item3">
						<u-checkbox-group v-model="model1.checkboxValue3" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList3"
								v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>

				</u--form>

			</view>
			<view @click="submit()">ssss</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				checked: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				model1: {
					userInfo: {
						name: '楼兰',
						sex: '',
						birthday: ''
					},
					radiovalue1: '苹果',
					checkboxValue1: ["Fri_1"],
					checkboxValue2: [],
					checkboxValue3: [],

					intro: '',
					code: ''
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					code: {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					radiovalue1: {
						type: 'string',
						min: 1,
						max: 2,
						message: '橙子有毒',
						trigger: ['change']
					},
					 
					intro: {
						type: 'string',
						min: 3,
						required: true,
						message: '不低于3个字',
						trigger: ['change']
					},
					hotel: {
						type: 'string',
						min: 2,
						required: true,
						message: '请选择住店时间',
						trigger: ['change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
				},
				radiolist1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
						disabled: false
					},
					{
						name: '毒橙子',
						disabled: false
					}
				],
				checkboxList1: [{
						name: 'Mon_1',
						position: '',
						disabled: true
					},
					{
						name: 'Tues_1',
						position: '',
						disabled: true
					},
					{
						name: 'Wed_1',
						position: '',
						disabled: true
					},
					{
						name: 'Thur_1',
						position: '',
						disabled: true
					},
					{
						name: 'Fri_1',
						position: '',
						disabled: true
					},
					{
						name: 'Sat_1',
						position: '',
						disabled: true
					},
					{
						name: 'Sun_1',
						position: '',
						disabled: true
					}
				],
				checkboxList2: [{
						name: 'Mon_2',
						position: '',
						disabled: true
					},
					{
						name: 'Tues_2',
						position: '',
						disabled: true
					},
					{
						name: 'Wed_2',
						position: '',
						disabled: true
					},
					{
						name: 'Thur_2',
						position: '',
						disabled: true
					},
					{
						name: 'Fri_2',
						position: '',
						disabled: true
					},
					{
						name: 'Sat_2',
						position: '',
						disabled: false
					},
					{
						name: 'Sun_2',
						position: '',
						disabled: false
					}
				 
				],
				checkboxList3: [{
						name: 'Mon_3',
						position: '',
						disabled: false
					},
					{
						name: 'Tues_3',
						position: '',
						disabled: false
					},
					{
						name: 'Wed_3',
						position: '',
						disabled: false
					},
					{
						name: 'Thur_3',
						position: '',
						disabled: false
					},
					{
						name: 'Fri_3',
						position: '',
						disabled: false
					},
					{
						name: 'Sat_3',
						position: '',
						disabled: false
					},
					{
						name: 'Sun_3',
						position: '',
						disabled: false
					}
				 
				],
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			// this.$refs.form1.setRules(this.rules)
		},
		methods: {
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			change(e) {
				// console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
				this.$refs.form1.validateField('hotel')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			calendarClose() {
				this.showCalendar = false
				this.$refs.form1.validateField('hotel')
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.form1.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.form1.validateField('userInfo.birthday')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					console.log(this.model1.checkboxValue1);
					console.log(this.model1.checkboxValue2);
					console.log(this.model1.checkboxValue3);
					
				 
					console.log(mergedArrayall);
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
					'hotel', 'code', 'userInfo.birthday'
				]
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">
	.bg_white{
		background: white;
	}

</style>
